<template>
	<view class="orderForm tab">
		<!-- 搜索输入框 -->
		<view class="searchInput">
			<uni-search-bar :radius="100" @input="search"></uni-search-bar>
		</view>
		<!-- 订单状态 -->
		<view class="pickerWrap">
			<view class="pickerBox" v-if="userType === '1' || userType === '2'">
				<text class="lable">订单状态：</text>
				<uni-data-picker class="picker" :localdata="statusList" popup-title="根据订单状态筛选" @change="onchange">
				</uni-data-picker>
			</view>
			<view class="pickerBox">
				<text class="lable">时间筛选：</text>
				<uni-data-picker class="picker" :localdata="timeList" popup-title="根据订单状态筛选" @change="onchangeTime">
				</uni-data-picker>
			</view>
		</view>
		<!-- 卡片区域 -->
		<view class="listCardWrap" v-if="orderList.length">
			<view class="listCard" v-for="(item,index) in orderList" :key="index" @click="toOrderDetail(item)">
				<view class="list">
					<text>单 号：{{item.orderId}}</text>
				</view>
				<view class="list">
					<text>商 品：{{item.shopName}}</text>
				</view>
				<view class="list">
					<text>时 间：{{item.datetime}}</text>
				</view>
				<view class="list">
					<text>数 量：{{item.shopCount}}瓶</text>
				</view>
				<view class="list">
					<text v-if="userType === '7'">
						配 送：{{item.courierName || "暂无配送"}}
					</text>
					<text>状 态：{{item.status}}</text>
				</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: 30rpx;" v-else>暂无订单!</view>
		<!-- 按钮 -->
		<!-- 业务员 -->
		<view class="btnBox" v-if="userType==='0'">
			<button class="btn" size="mini" type="primary" @click="handleCreate">创建订单</button>
		</view>
	</view>
</template>

<script>
	import throttle from "@/utils/throttle.js"
	const statusLists = {
		// 财务
		"1": [{
			text: "全部订单",
			value: "0",
		}, {
			text: "待审批订单",
			value: "1",
		}, {
			text: "已审批订单",
			value: "2",
		}],
		// 配送
		"2": [{
			text: "全部订单",
			value: "0",
		}, {
			text: "待接单订单",
			value: "3",
		}, {
			text: "已配送订单",
			value: "4",
		}]
	}
	export default {
		name: "orderForm",
		data() {
			return {
				page: 1,
				total: 0,
				type: "0",
				keywords: "",
				days: 99999,
				timeList: [{
					text: "所有",
					value: 99999,
				}, {
					text: "最近一天",
					value: 1,
				}, {
					text: "最近三天",
					value: 3,
				}, {
					text: "最近七天",
					value: 7,
				}, {
					text: "最近一月",
					value: 30,
				}],
				orderList: []
			}
		},
		computed: {
			/* 订单状态 */
			statusList() {
				return statusLists[this.userType] ?? []
			}
		},
		// 上拉触底事件
		onReachBottom() {
			console.log("触底了")
			if (this.orderList.length >= this.total) return
			this.page += 1
			this.getOrderList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.orderList = []
			this.getOrderList()
			this.getMessageList()
		},
		onShow() {
			this.orderList = []
			this.getOrderList()
			if (this.phone) this.getMessageList()
		},
		methods: {
			// 获取订单详情
			async getMessageList() {
				try {
					const {
						data
					} = await this.request("getMessageList", {
						phone: this.phone
					})

					this.msgCount = data.count
					if (this.msgCount) {
						wx.setTabBarBadge({
							index: 1,
							text: `${this.msgCount}`
						})
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 创建订单
			handleCreate() {
				uni.navigateTo({
					url: "/pages/createOrder/createOrder"
				})
			},
			/* 获取表格数据 */
			async getOrderList() {
				if (!this.phone) return
				const {
					data
				} = await this.request("getOrderList", {
					phone: this.phone,
					page: this.page,
					type: this.type,
					days: this.days,
					keywords: this.keywords
				})

				this.orderList.push(...data.orderList)
				this.total = data.total
			},
			/* 筛选条件变化 */
			onchange(detail) {
				this.page = 1
				this.type = detail.detail.value[0].value
				this.orderList = []
				this.getOrderList()
			},
			onchangeTime(detail) {
				this.page = 1
				this.days = detail.detail.value[0].value
				this.orderList = []
				this.getOrderList()
			},
			/* 搜索 */
			search: throttle(async function(value) {
				// 搜索初始化页数
				this.page = 1
				this.keywords = value
				this.orderList = []
				this.getOrderList()
			}, 300),
			/* 跳转详情页 */
			toOrderDetail(item) {
				uni.navigateTo({
					url: `/pages/orderDetail/orderDetail?orderId=${item.orderId}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderForm {
		padding: 10rpx 20rpx 60rpx;

		.btnBox {
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.btn {
				background-color: rgba(26, 173, 25, .9);
			}
		}
	}

	.searchInput {
		margin-bottom: 20rpx;
	}

	.pickerWrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pickerBox {
		display: flex;
		align-items: center;

		.lable {
			font-size: 28rpx;
			color: #999;
		}

		.picker {
			width: 25vw;
		}
	}

	.listCardWrap {
		margin-top: 40rpx;

		.listCard {
			width: calc(95vw - 40rpx);
			margin: 0 auto;
			padding: 20rpx;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 8rpx -2rpx;
			overflow: hidden;

			&+.listCard {
				margin-top: 30rpx;
			}

			.list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				&+.list {
					margin-top: 10rpx;
				}

				text {
					display: flex;
					align-items: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;

					.topic {
						display: inline-block;
						width: 120rpx;
						text-align-last: justify;
					}
				}
			}
		}
	}
</style>
